<template>
  <div class="page-container">
    <!-- 当操作进行中显示 Loading 组件 -->
    <Loading v-if="isLoading" />

    <!-- Modal 组件用于提醒 -->
    <Modal
        :visible="modalVisible"
        :title="modalTitle"
        @confirm="closeModal"
        @cancel="closeModal"
    >
      <div>{{ modalMessage }}</div>
    </Modal>

    <!-- 账单识别（上传区域） -->
    <div class="form-container">
      <h2 class="title">账单识别</h2>
      <div class="upload-section">
        <input
            type="file"
            @change="handleFileUpload"
            :title="selectedFiles.length ? selectedFiles.map(file => file.name).join(', ') : '请选择文件'"
            accept="image/*"
            class="input-box file-input"
            multiple
        />
        <button @click="uploadImage" class="confirm-btn button">确定</button>
      </div>
    </div>

    <!-- 账单列表（仅当 bills 不为空时显示） -->
    <div v-if="bills.length > 0" class="form-container">
      <h3 class="sub-title">账单列表</h3>
      <div v-for="(bill, index) in bills" :key="index" class="bill-item card">
        <div class="form-item">
          <label>日期：</label>
          <input v-model="bill.date" type="date" class="input-box" />
        </div>
        <div class="form-item">
          <label>金额：</label>
          <input v-model.number="bill.amount" type="number" class="input-box" />
        </div>
        <div class="form-item">
          <label>类别：</label>
          <input v-model="bill.category" type="text" class="input-box" />
        </div>
        <div class="form-item">
          <label>备注：</label>
          <input v-model="bill.remark" type="text" class="input-box" />
        </div>
        <button @click="deleteBill(index)" class="btn-delete home-page-delete-btn">
          删除
        </button>
      </div>
    </div>

    <!-- 完成按钮（仅当 bills 不为空时显示） -->
    <button
        v-if="bills.length > 0"
        @click="submitBills"
        class="confirm-btn submit-btn button"
    >
      完成
    </button>
  </div>
</template>

<script lang="ts" setup>
import { useHomePage } from "./HomePage";
import Loading from "../../components/Loading/Loading.vue";
import Modal from "../../components/Modal/Modal.vue";

const {
  bills,
  selectedFiles,
  handleFileUpload,
  uploadImage,
  deleteBill,
  submitBills,
  isLoading,
  modalVisible,
  modalTitle,
  modalMessage,
  closeModal,
} = useHomePage();
</script>

<style scoped>
.page-container {
  max-width: 800px;
  width: 90%;
  margin: 20px auto;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-container {
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bill-item {
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #fafafa;
}

.form-item {
  margin-bottom: 12px;
}

.home-page-delete-btn {
  width: 100%;
}

.form-item label {
  display: inline-block;
  width: 60px;
  font-weight: 500;
}

.title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}

.sub-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
}

.upload-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 10px;
}

.input-box {
  width: 100%;
  height: 40px;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  margin-top: 4px;
}

.button {
  cursor: pointer;
  border: none;
  outline: none;
  font-size: 16px;
  padding: 10px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.confirm-btn {
  background-color: #007bff;
  color: white;
}

.confirm-btn:hover {
  background-color: #0056b3;
}

.submit-btn {
  width: 100%;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .page-container {
    max-width: 90%;
    padding: 0 10px;
  }
  .form-container {
    margin: 16px 10px;
  }
}
</style>